<template>
  <div>
    <!--头部-->
    <van-nav-bar
        title="推荐院校"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <!--院校列表展示-->
    <div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :finished="finished"
            :error.sync="error"
            :offset="offset"
            :finished-text="recUniversityList.length > 0 ? '没有更多了' : '暂无数据'"
            error-text="请求失败，点击重新加载"
            @load="onLoad"
        >
          <van-cell
              is-link
              v-for="u in recUniversityList"
              :key="u.id"
              :to="{
                  name:'UniDetail',
                  params:{
                  uniId:u.id
              }
            }"
          >
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">{{ u.name }}</span>
              <van-tag type="primary">{{ u.typeName }}</van-tag>
              <van-tag v-if="u.sort <= 20" class="custom-sort" type="warning">985</van-tag>
              <van-tag v-if="u.sort <= 30" class="custom-sort" type="warning">211</van-tag>
            </template>
            <!-- 使用 label 插槽来自定义标题 -->
            <template #label>
              <span class="custom-label">{{ u.regionName }}</span>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>

  </div>
</template>

<script>
import University from "@/views/University";

export default {
  name: "RecUniversity",
  components: {University},
  data() {
    return {
      recUniversityList: [],
      loading: false,
      finished: false,
      error: false,
      refreshing: false,
      offset: 0,
    }
  },
  methods: {
    //下拉列表刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    //列表加载
    onLoad() {
      const params = {
        userId: this.$route.params.userId,
        majorId: this.$route.params.majorId
      }
      if (this.refreshing) {
        this.recUniversityList = []
      }
      // 异步更新数据
      this.request.post('/api/university/selectByRecommend', params).then(res => {
        if (res.code === 1) {
          this.recUniversityList = res.data
          setTimeout(() => {
            this.refreshing = false
          }, 1000)
          // 加载状态结束
          this.loading = false;
          this.finished = true;
        } else {
          this.error = true;
        }
      })
    },
    onClickLeft() {
      this.$router.back()
    }
  },
  created() {
    const params = {
      userId: this.$route.params.userId,
      majorId: this.$route.params.majorId
    }
    this.request.post('/api/university/selectByRecommend', params).then(res => {
      if (res.code === 1) {
        this.recUniversityList = res.data
      }
    })
  }
}
</script>

<style scoped>
.custom-sort {
  margin-left: 5px;
}
</style>